<!-- 头部组件 -->
<template>
  <div class="header-box">
    <div class="header-bg"></div>
    <div class="header-info">
      <!-- 左侧名字 -->
      <div class="text">
        <span>{{ text }}</span>
      </div>
      <!-- 右侧信息 -->
      <div class="info">
        <!-- 时间 -->
        <div class="dateTitle">
          <span>{{ date }}</span>
        </div>
        <div class="dateTitle">
          <span>{{ week }}</span>
        </div>
        <div class="time">
          <span>{{ time }}</span>
        </div>

        <!-- 操作 -->
        <div class="operation">
          <img
            :src="!fullVisible ? '/img/header-full.png' : '/img/header-close.png'"
            @click="quan()"
            alt=""
            title="全屏" />
          <img src="/img/setting.png" @click="showDialog(2)" alt="" title="修改密码" />
          <img src="/img/login-out.png" @click="showDialog(1)" alt="" title="退出登录" />
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <DialogCard
      title=""
      width="400"
      height="200"
      top="400%"
      @close="onClose(1)"
      v-if="loginOutVisvible">
      <template v-slot:content>
        <div class="content">
          <p>确认退出登录吗？</p>
          <div class="btn-box">
            <div class="content-btn" @click="loginOut">确认</div>
          </div>
        </div>
      </template>
    </DialogCard>
    <!-- 修改密码 -->
    <DialogCard
      title="修改密码"
      width="500"
      height="300"
      top="350%"
      @close="onClose(2)"
      v-if="modityVisvible">
      <template v-slot:content>
        <div class="content">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            label-position="left"
            class="demo-ruleForm"
            status-icon>
            <el-form-item label="用户名：" prop="account">
              <el-input v-model="ruleForm.account" disabled/>
            </el-form-item>
            <el-form-item label="原密码：" prop="oldPasswd">
              <el-input v-model="ruleForm.oldPasswd" type="password" show-password/>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPasswd">
              <el-input v-model="ruleForm.newPasswd"  type="password" show-password/>
            </el-form-item>
            <!-- <el-form-item label="确认密码：" prop="oldPasswd">
              <el-input v-model="ruleForm.confirmPasswd"  type="password" show-password/>
            </el-form-item> -->
          </el-form>
          <div class="content-btn" @click="onConfirm(ruleFormRef)">确认修改</div>
        </div>
      </template>
    </DialogCard>
  </div>
</template>
<script setup>
  import { onMounted, ref, inject, onUnmounted, computed, watch, nextTick } from 'vue'
  import DialogCard from '@/components/home/dialog/dialogCard.vue'
  import { useRouter } from 'vue-router'
  import screenfull from 'screenfull'
  import { useLoginStore } from '@/stores/login'
  import { useCompanyInfoStore } from '@/stores/platform'
  import { updatePasswd } from '@/api/login'
  const loginStore = useLoginStore()
  //一周日期
  const weeks = ref()
  const noquan = ref()
  const companyInfoStore = useCompanyInfoStore()
  const message = inject('$message')
  const router = useRouter()
  const fullVisible = ref(false)
  const loginOutVisvible = ref(false)
  const modityVisvible = ref(false)
  //修改密码的表单
  const ruleFormRef = ref(null)
  const ruleForm = ref({
    account:'',
    oldPasswd: '',
    newPasswd: '',
    confirmPasswd: '',
  })
  const rules = ref({
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    oldPasswd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
    newPasswd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
    // confirmPasswd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  })
  /**
   * @description: 全屏
   */
  const quan = () => {
    noquan.value = '您的浏览器不支持全屏'
    if (!screenfull.isEnabled) {
      message({
        message: noquan.value,
        type: 'warning',
      })
      return false
    }
    screenfull.toggle()
    if (document.fullscreenElement == null) {
      fullVisible.value = true
    } else {
      fullVisible.value = false
    }
  }
  /**
   * @description: 打开退出登录弹窗
   */
  const showDialog = (val) => {
    if (val == 1) {
      loginOutVisvible.value = true
    } else if (val == 2) {
      modityVisvible.value = true
      nextTick(()=>{
        ruleForm.value.account=loginStore.state.account
      })
    }
  }
  /**
   * @description: 关闭退出登录弹窗
   */
  const onClose = (val) => {
    if (val == 1) {
      loginOutVisvible.value = false
    } else if (val == 2) {
      ruleForm.value = {
        oldPasswd: '',
        newPasswd: '',
        confirmPasswd: '',
      }
      ruleFormRef.value.resetFields()
      modityVisvible.value = false
    }
  }
  /**
   * @description: 退出
   */
  const loginOut = () => {
    onClose()
    loginStore.setToken('')
    loginStore.setAccount('')
    router.push('/login')
    message({
      showClose: true,
      message: '操作成功',
      type: 'success',
    })
  }

  /**
   * @description: 修改密码
   */
  const onConfirm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
        let params = {
          username:ruleForm.value.account,
          password:ruleForm.value.oldPasswd,
          newPassword:ruleForm.value.newPasswd,
        }
        updatePasswd(params)
          .then((res) => {
            if (res.code * 1 == 200) {
              message({
                showClose: true,
                message: '密码修改成功',
                type: 'success',
              })
              loginStore.setToken('')
              loginStore.setAccount('')
              router.push('/login')
            }else{
              message({
                showClose: true,
                message: res.msg,
                type: 'error',
              })
            }
          })
          .catch((err) => {
            loading.value = false
          })
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  /**
   * @description: 修改账号字号
   * @return {*}
   */
  const resize = () => {
    document.querySelector('#userNameSpan').style.fontSize = '32px'
    resize_to_fit()
    function resize_to_fit() {
      let dom = document.querySelector('#userNameBox')
      try {
        let dom1 = document.querySelector('#userNameSpan')
        if (dom1) {
          let size = dom1.style.fontSize
          dom1.style.fontSize = parseFloat(size) - 1 + 'px'
          if (dom1.offsetHeight >= dom.clientHeight) {
            resize_to_fit()
          }
        }
      } catch (error) {}
    }
  }

  const text = ref('低空防御指挥平台')
  const name = ref()
  const date = ref()
  const time = ref('')
  const week = ref()
  const timerID = ref(null)

  onMounted(() => {
    if (Object.keys(companyInfoStore.state.companyInfo).length > 0) {
      text.value = '低空防御指挥平台'
      let dataInfo = companyInfoStore.state.companyInfo
      name.value = dataInfo.companyName
    }
    // 时间
    weeks.value = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

    const updateTime = () => {
      const cd = new Date()
      time.value =
        zeroPadding(cd.getHours(), 2) +
        ':' +
        zeroPadding(cd.getMinutes(), 2) +
        ':' +
        zeroPadding(cd.getSeconds(), 2)
      date.value =
        zeroPadding(cd.getFullYear(), 4) +
        '-' +
        zeroPadding(cd.getMonth() + 1, 2) +
        '-' +
        zeroPadding(cd.getDate(), 2)
      const day = cd.getDay()
      week.value = weeks.value[day]
    }
    const zeroPadding = (num, digit) => {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    }
    setTimeout(() => {
      timerID.value = setInterval(updateTime, 1000)
      updateTime()
      // resize()
    }, 100)
  })
  onUnmounted(() => {
    clearInterval(timerID.value)
  })
</script>
<style lang="scss" scoped>
  .header-box {
    width: 100%;
    height: 8.6vh;
    display: flex;
    z-index: 33;
    position: fixed;
    .header-bg {
      position: absolute;
      width: 100%;
      height: 8.6vh;
      background-size: 100% 100%;
    }
    .header-info {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 1.5% 0 85px;
      z-index: 2;
    }
    .text {
      width: 60%;
      background-size: 100%;
      span {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 44px;
        line-height: 8.6vh;
        color: #ffffff;
        letter-spacing: 5px;
      }
    }
    .info {
      height: 8vh;
      display: flex;
      align-items: center;
      .name {
        width: 58%;
        padding: 0 10px;
        text-align: right;
        color: #ffffff;
        span {
          font-weight: 700;
          font-size: 32px;
          letter-spacing: 2px;
          color: #ffffff;
          text-shadow: 0px 2px 50px #007eff;
          text-stroke: 1px #ffffff;
          background: linear-gradient(180deg, #ffffff 0%, #3081c9 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .dateTitle {
        height: 40px;
        line-height: 40px;
        span {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: rgba(156, 178, 186, 1);
          padding: 0 15px;
        }
      }
      .time {
        height: 40px;
        line-height: 40px;
        span {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 36px;
          color: #c3efff;
          padding-left: 15px;
        }
      }
      .operation {
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        img {
          cursor: pointer;
          width: 47px;
          height: 20px;
          padding: 0 3px;
        }
      }
    }
  }
  .content {
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      margin: 15px 0;
      .item-title {
        color: #ffffff;
      }
      .select {
        width: 300px;
      }
      .ipt {
        width: 300px;
        color: #ffffff;
      }
    }
    .content-btn {
      width: 89px;
      height: 31px;
      background: linear-gradient(90deg, #21a4d7 0%, #1550ab 100%);
      border: 1px solid #80ebfd;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);
      color: #ffffff;
      line-height: 31px;
      text-align: center;
      margin: 0 auto;
      margin-top: 30px;
    }
  }
  // .el-input.is-disabled .el-input__wrapper
  :deep(.el-input__wrapper) {
    background-color: transparent!important;
    box-shadow: 0 0 0 1px #2790c8 inset!important;
  }
  :deep(.el-input__inner) {
    color: #fff;
    border: none;
    border-radius: 0px;
    border-color: transparent;
    background-color: transparent;
  }
</style>
